import React, { useState, useEffect } from 'react';
import { Spin, Avatar, Tooltip } from 'antd';
import { connect } from 'umi';
import { getWorkingDays } from '@/services/notice/homePage';
import { queryEmployeeArchiveHead } from '@/pages/Organization/EmployeeManage/services';
import { eventTrack } from '@/utils/track';
import Icon from '@/components/IconPro';
import { history } from 'umi'

import styles from './index.less';

const Profile = ({ avatarFile: file, dispatch }) => {
    const [spinning, setSpinning] = useState(false);
    const [workingDays, setWorkingDays] = useState('');
    const [postContent, setPostContent] = useState('');
    const user = localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : {};
    const init = async () => {
        setSpinning(true);
        // const res = await getWorkingDays();
        const [workData, employeeData] = await Promise.all([
            getWorkingDays(),
            queryEmployeeArchiveHead({ employeeCode: user.employeeCode })
        ]);
        setSpinning(false);
        if (workData && workData.code === 10000) {
            setWorkingDays(workData.data.id);
        }
        if (employeeData && employeeData.code === 10000) {
            const { organizationName, dutyAlias } = employeeData.data;
            setPostContent(`${organizationName} / ${dutyAlias}`);
        }
    };
    useEffect(() => {
        // TODO 拖拽时到不同列时子组件会重载
        init();
    }, []);

    // 是否存在入职天数
    // const haveDays = workingDays >= 1;
    const renderDays = () => {
        // 判断离职后不显示文案
        if (!user || !user.userNo || user?.inServiceStatus === '6') {
            return null;
        }
        // 判断入职后的文案
        if (workingDays > 0) {
            return (
                <>
                    今天是你陪伴微微成长的
                    <br />第<span>{workingDays}</span>天
                </>
            );
        }
        return <>微微期待你的加入!</>;
    };

    const handleClick = e => {
        e.stopPropagation();
        dispatch({
            type: 'homePage/save',
            payload: {
                userLayout: true
            }
        });
    };

    return (
        <Spin spinning={spinning}>
            <div
                className={styles.infoBox}
                onClick={() => {
                    eventTrack({
                        eventName: 'portal_personal_info_position_click',
                        pageName: 'personal_portal'
                    });
                }}
            >
                <div className={styles.leftPart}>
                    <Avatar
                        icon="user"
                        src={file && file.avatarFile && file.avatarFile.length > 0 ? file.avatarFile[0].url : ''}
                        size={72}
                    />
                </div>
                <div className={styles.rightPart}>
                    <div className={styles.settingLayout}>
                        <div className={styles.name}>{user.employeeName}</div>
                        <Tooltip placement="bottom" title="自定义模块">
                            <Icon.Button
                                className={styles.settingLayoutIcon}
                                dark
                                icon="iconCustomHomepage"
                                onClick={e => handleClick(e)}
                            />
                        </Tooltip>
                    </div>
                    <div className={styles.post}>{postContent}</div>
                    <div className={styles.day}>{renderDays()}</div>
                </div>
            </div>
            {user?.regularFlag === 0 && (
                <div className={styles.guide}>
                    <a
                        onClick={() => {
                            history.push('/personal/entryGuide');
                        }}
                        className={styles.button}
                    >
                        <Icon type="icondaijiaoyindao" style={{ fontSize: 18, marginRight: 6 }} />
                        新员工指引
                    </a>
                </div>
            )}
        </Spin>
    );
};
export default connect(({ homePage }) => ({
    homePage
}))(Profile);
